[CSS] 리스트 요소의 순서를 반대로(reverse) 바꾸는 방법

CSS를 사용하여 테이블이나 리스트의 내용을 반대로 바꾸어 보여주려고 합니다. 가능할까요? 아래에서 알아봅니다.

# CSS를 사용하여 거꾸로 보여주는 방법, reverse

결론부터 얘기하면 가능합니다. 만약 데이터를 그대로 웹에 보여주는 경우라면? 데이터의 순서를 바꾸면 됩니다. 하지만 데이터의 순서를 바꾸게 되면 원하는 화면만 바뀌는 것이 아니라 데이터가 연결된 전체 앱의 순서에도 영향을 주게 됩니다. 우리는 데이터 순서는 그대로 두고 화면에 보여지는 View만 변경해보려고 합니다. 즉 다른 방법을 찾아야겠죠.

@ 간단한 팁
프론트엔드 프레임워크라면 reverse 필터 등을 사용하는 것도 좋은 방법이겠죠

아래 방법은 원하는 결과를 쉽고 간단하게 만들어 줍니다. 반대로 바꾸기 위해서 사용할 css 스타일 속은 다음과 같습니다.

1. transform 속성의 rotate() 사용하기
2. flex 레이아웃과 flex-direction의 값 column-reverse 사용하기

이처럼 위의 두 가지 방법 모두 사용 가능한 방법입니다. 하지만 flex 타입을 적용하기 어려운 경우... 예를들어 테이블 태그에는 1번 방법인 transform, rotate()를 사용해야 합니다. 즉 flex를 사용하면 가장 간단하지만 경우에 따라 transform, rotate()를 사용하는 것이 좋죠.
이제 어떻게 사용하는지 하나씩 알아보도록 하겠습니다.

! transform, rotate()를 사용하기

이 방법은 각각의 아이템들과 이를 담고 있는 컨테이너(랩퍼)에 각각 스타일을 적용해야 합니다.

여기서 div가 바로 컨테이너가 되고 아래의 p 태그들이 아이템들이 되겠죠. 브라우저에서 3, 2, 1의 순서대로 거꾸로 나오기 위해 아래와 같이 스타일을 적용합니다.

이제 브라우저에 어떻게 나타날까요? 아래와 같이 반대로 출력되어 나타나게 됩니다.

이처럼 원하는 결과를 쉽게 얻을 수 있습니다. 다음으로 flex를 사용하는 방법입니다.

! flex를 사용하여 순서 반대로 바꾸는 방법

다음 방법은 flex를 사용하는 경우입니다. 이 경우 column-reverse를 사용해 간단하게 순서를 바꾸어 보여줄 수 있습니다.

이제 위 css를 적용하면 어떻게 나타날까요? 아래와 같이 반대로 나타나는 것을 확인 할 수 있습니다.

이처럼 css만 사용해서도 간단하게 순서를 바뀌어 출력하는 것이 가능합니다.

! 마치면서

실제로 데이터를 조작할 때 순서는 그대로 두고 보여지는 View 부분만 반대로 보여주는 경우에 위와 같은 방법을 사용하면 매우 효과적입니다.